/**
 * 计时器挂件第一层: 呼吸墙
 */

class BreathingWall {

  // config
  parent = null;
  zrender = null;
  zrInstance = null;
  /** @type {number} */
  tickDuration = 12000;

  // 实际成员
  blocks = null;
  column = 0; // l1_width 呼吸方块有多少列
  row = 0; // l1_height 呼吸方块有多少行
  /** @type {number} */
  nextTick = null;
  /** @type {number} */
  lastTick = 0;

  constructor(options) {
    this.parent = options.parent;
    this.zrender = options.zrender;
    this.zrInstance = options.zrInstance;
    this.tickDuration = options.tickDuration || this.tickDuration;

    let {blocks, column, row} =
      drawInit(this.parent.width, this.parent.height, this.zrender, this.zrInstance);
    this.blocks = blocks;
    this.column = column;
    this.row = row;
    this.nextTick = new Date().getTime();
  }

  needTick() {
    let current = new Date().getTime();
    if (current > this.lastTick + this.tickDuration) {
      this.lastTick = current;
      return true;
    }
    return false;
  }

  tick() {
    if (!this.needTick()) {
      return;
    }

    // 动画
    for (var x = 0; x < this.column; x++) {
      for (var y = 0; y < this.row; y++) {
        var el = this.blocks[x][y];
        el.animate('style', false)
          .delay(x * 100 + y * 50)
          .when(800, {
            opacity: 0.4
          }).when(1400, {
            opacity: 0.3
          }).when(3000 + parseInt(Math.random() * 1200), {
            opacity: 0
          }).start('quadraticOut');
      }
    }
  };

  destroy() {
    // no-thing
  };
}

/**
 * 占用 z = -5 ~ -8
 * @param {number} canvasWidth 
 * @param {number} canvasHeight 
 */
function drawInit(canvasWidth, canvasHeight, zrender, zr) {

  // 横线
  var basey = parseInt(canvasHeight / 2) + 30;
  var y = basey - parseInt(basey / 18) * 18;
  var oy = (y <= 0) ? y + 3 : y - 15; 

  while (y < canvasHeight) {
    var color = null;
    var z = -5;
    switch ((Math.abs(basey - y) / 18) % 8) {
      case 0:
        color = '#FFF';
        break; // 白线
      case 2: case 4: case 6:
        color = '#2e80a4';
        z = -6;
        break; // 浅线
      default:
        color = '#093c52';
        z = -7;
        break; // 深线
    }

    var rect = new zrender.Rect({
      shape: {
        width: canvasWidth,
        height: 3
      },
      style: {
        fill: color,
        opacity: 0.25
      },
      position: [0, y],
      z: z
    });

    zr.add(rect);
    y += 18;
  }

  // 纵线
  var basex = parseInt(canvasWidth / 2) - 73;
  var x = basex - parseInt(basex / 18) * 18;
  var ox = (x <= 0) ? x + 3 : x - 15; 

  while (x < canvasWidth) {
    var color = null;
    var z = -5;
    switch ((Math.abs(basex - x) / 18) % 8) {
      case 0:
        color = '#FFF';
        break; // 白线
      case 2: case 4: case 6:
        color = '#2e80a4';
        z = -6;
        break; // 浅线
      default:
        color = '#093c52';
        z = -7;
        break; // 深线
    }

    var rect = new zrender.Rect({
      shape: {
        width: 3,
        height: canvasHeight
      },
      style: {
        fill: color,
        opacity: 0.25
      },
      position: [x, 0],
      z: z
    });

    zr.add(rect);
    x += 18;
  }

  // 中间的呼吸方块
  var blocks = [];
  x = ox;
  while (x < canvasWidth) {
    y = oy;
    var array = [];
    blocks.push(array);
    while (y < canvasHeight) {
      var rect = new zrender.Rect({
        shape: {
          width: 15,
          height: 15
        },
        style: {
          fill: '#FFF',
          opacity: 0
        },
        position: [x, y],
        z: -8
      });

      array.push(rect);
      zr.add(rect);

      y += 18;
    }
    x += 18;
  }
  var column = blocks.length;
  var row = 0;
  if (column != 0) {
    row = blocks[0].length;
  }

  return {blocks, column, row};
}

export default BreathingWall;